<template>
    <div class="bg flex">
        <div class="g-container">
            <div class="word">欢迎来到</div>
            <div class="word">我的个人博客</div>
            <div class="word">到处看看吧</div>
            <div class="word">😁</div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Welcome'
}
</script>

<!-- 渐变背景 -->
<style scoped>
div.bg {
    width: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0);
    animation: hueRotate 10s infinite alternate;
}

@keyframes hueRotate {
    100% {
        filter: hue-rotate(360deg);
    }
}

.title {
    /* color: #fff; */
    font-size: 50px;
    text-align: center;
}
</style>

<!-- 标题效果 -->
<style lang="scss" scoped>
$speed: 10s;
$wordCount: 4;

.g-container {
    position: relative;
    width: 100vw;
    height: 80vh;
    background: none;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 120px;
    filter: contrast(15);
}

.word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: change $speed infinite ease-in-out;

    @for $i from 0 to $wordCount {
        &:nth-child(#{$i + 1}) {
            animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
        }
    }
}

@keyframes change {

    0%,
    5%,
    100% {
        filter: blur(0px);
        opacity: 1;
    }

    50%,
    80% {
        filter: blur(80px);
        opacity: 0;
    }
}
</style>